<template>
	<view>
		<image mode="widthFix" class="logoImg" src="../../static/images/logo.jpg" alt="" srcset="" />
		<view class="title">
			爱心公益
		</view>
		<view class="num">
			捐赠金额：<span style="color: red;">{{benefitActivity.baseDonateIntegral}}</span>
		</view>
		<view class="btn" @click="juanzeng">
			捐赠
		</view>
		
		<view class="other">
			<view class="">
			   文乐文用户捐赠:{{benefitActivity.userDonateIntegral}}金额
			</view>
			<view class="">
			   经销商捐赠:{{benefitActivity.agentDonateIntegral}}金额
			</view>
		</view>
		
		
		<view class="mainPage" @click="toInfo">
			公益活动：{{benefitActivity.activityName}}
			<view class="">
				{{benefitActivity.allDonateIntegral}}金额 (点击查看明细)
			</view>
		</view>
		
		
		<view class="my">
			我的公益捐赠：{{benefitActivity.myDonateIntegral}}金额
		</view>
		
		<view class="titles" style="margin-top: 20rpx;">
			<view class="">
				捐赠公司
			</view>
			<view class="scroll_box">
				<swiper class="swiper" circular="true" vertical="true" display-multiple-items="10" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in comlist" :key="index">
						<view class="swiper-item uni-bg-green">{{item.agentName}}  {{item.donateNum}}金额</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {benefitActivityget,benefitActivitydonate,benefitActivityrecordList} from '@/api/api.js';
	export default {
		components: {},
		data() {
			return {
				autoplay: true,
				interval: 1000,
				duration: 2000,
				
				comlist:[],
				benefitActivity:{}
			};
		},
		onShow() {
			this.getData()
			this.getlist()
		},
		methods: {
			getData(){
				benefitActivityget().then(res=>{
					this.benefitActivity = res.data
				})
			},
			getlist(){
				let data = {
					type:2
				}
				benefitActivityrecordList(data).then(res=>{
					console.log('列表')
					console.log(res)
					this.comlist = res.data.list
				})
			},
			toInfo(){
				uni.navigateTo({
					url:'/pages/user/juanzenglist'
				})
			},
			juanzeng(){
				let data = {
					id:this.benefitActivity.id
				}
				benefitActivitydonate(data).then(res=>{
					this.getData()
					this.$util.Tips({
						title: '捐赠成功，感谢您的捐赠'
					});
				})
			}

		}
	};
</script>

<style>
	page {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.my{
		font-size: 32rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	.logoImg {
		width: 200rpx;
		height: 200rpx;
		margin: 3% auto;
		display: block;
	}
	
	.titles {
		background-color: #fff;
		box-shadow: 0 0 3px #ccc;
		padding: 30rpx;
		border-radius: 10rpx;
	}
	.title{
		text-align: center;
		font-size: 40rpx;
		margin-top: 50rpx;
	}
	
	.mainPage{
		text-align: center;
		color: red;
		margin-top: 40rpx;
		font-size: 30rpx;
	}
	.num{
		text-align: center;
		font-size: 30rpx;
		margin-top: 40rpx;
	}
	
	.btn{
		width: 600rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #c30000;
		color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	
	.other{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		view{
			width: 50%;
			text-align: center;
			font-size: 30rpx;
		}
	}
	
	
	.scroll_box {
		background: #FFFFFF;
		margin: 30rpx;
		border-radius: 10rpx;
	
		.swiper {
			height:250px;
		}
	}
</style>